<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        .historyBox,
        .hotBox {
            padding: 0.75rem 0.75rem 0;
        }

        .historyTtl {
            height: 1.5rem;
            font-size: 0.6rem;
            color: #adadad;
        }

        .historyTtl .delBtn {
            padding: 0.25rem;
        }

        .historyTtl .delBtn img {
            height: 0.75rem;
        }

        .tagList {
            padding: 0.25rem 0;
            margin: 0 -0.25rem;
        }

        .tagList li {
            margin: 0.25rem;
            font-size: 0.6rem;
            background: #F4F3F2;
            line-height: 1.4rem;
            padding: 0 0.5rem;
            color: #555;
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
	<div id="data_html"></div>
	<div class="resultBox aui-hide">
		<div class="sortBox">
			<div class="sortList fix aui-flex-col aui-flex-middle">
				<div class="active" tapmode onClick="changeSort(0);">综合</div>
				<div tapmode onClick="changeSort(1);">优惠券</div>
				<div tapmode onClick="changeSort(2);">佣金</div>
				<div class="sort_price" tapmode onClick="changeSort(3);"><span>价格</span></div>
			</div>
		</div>
		<div class="comFlowBox">
			<div class="comGodList" id="flow_html">
				<div class="grid-sizer"></div>

			</div>
		</div>
	</div>

	<script type="text/x-dot-template" id="nodata_tpl">
		<div class="notData aui-flex-row aui-flex-middle">
			<img src="../../image/notdata/10.png" alt="">
			<div>没有找到相关宝贝</div>
		</div>
    </script>
    <script type="text/x-dot-template" id="history_tpl">
        <div class="historyBox">
            <div class="historyTtl aui-flex-col aui-flex-middle aui-flex-between">
                <div>历史搜索</div>
                <div class="delBtn" tapmode onClick="delConfirm();"><img src="../../image/common/13.png" alt=""></div>
            </div>
            <ul class="tagList aui-flex-col">
                {{ for(var i in it) { }} {{ if(it[i]){ }}
                <li tapmode onClick="searchTag(this);">{{= it[i]}}</li>
                {{ } }} {{ } }}
            </ul>
        </div>
    </script>
    <script type="text/x-dot-template" id="hot_tpl">
        <div class="hotBox">
            <div class="historyTtl aui-flex-col aui-flex-middle aui-flex-between">
                <div>热门搜索</div>
            </div>
            <ul class="tagList aui-flex-col">
                {{ for(var i in it) { }} {{ if(it[i]){ }}
                <li tapmode onClick="searchTag(this);">{{= it[i]}}</li>
                {{ } }} {{ } }}
            </ul>
        </div>
    </script>
    <script type="text/x-dot-template" id="flow_tpl">
        {{ for(var i in it){ }}
        {{ if(it[i].title){ }}
        <div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
            <div class="inner">
                {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                <div class="earn">赚￥{{= it[i].data_amount}}</div>
                {{ } }}
                <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                <div class="textBox">
                    <div class="title aui-flex-col aui-flex-middle">
                        <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle priceBox">
                        <div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
                        <div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
                    </div>
                    <div class="aui-flex-col aui-flex-middle aui-flex-between">
                        {{ if( it[i].coupon_info ){ }}
                        <dl class="quan outline aui-flex-col aui-flex-middle">
                            <dt>券</dt>
                            <dd>{{= it[i].coupon_info }}元</dd>
                        </dl>
                        {{ }else{ }}
                        <div></div>
                        {{ } }}
                        <div class="sale">月销 {{= it[i].volume }}件</div>
                    </div>
                </div>
            </div>
        </div>
        {{ } }}
        {{ } }}
    </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
    var historyData;
    var currentSearch = '';
    var gridDom = '#flow_html';
    var grid;
    var isLoading = false;
    var loadFlag = false;
    var pageSize = 50;
    var currentPage = 1;
    var postData = {};
	var filterType = 0;
    apiready = function() {
        api.parseTapmode();
        //默认显示搜索历史
        firstShow();
        //监听到达底部
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0
            }
        }, function(ret, err) {
            if (isLoading) return;
            if (loadFlag) {
                getData();
            }
        });
    };
    //第一屏 显示
    function firstShow() {
        if ($api.getStorage('searchHistory')) {
            historyData = $api.getStorage('searchHistory');
        } else {
            historyData = [];
        }

        showHistory();
        showHot();
    }
	//调用瀑布流
    grid = new Masonry(gridDom, {
        columnWidth: '.grid-sizer',
        itemSelector: '.item',
        percentPosition: true
    });
    imagesLoaded(gridDom, function() {
        grid.layout();
    });
    //显示历史记录
    function showHistory() {
        var tpl = $$('#history_tpl').html();
        var tempFn = doT.template(tpl);
        $$('#data_html').html(tempFn(historyData));
        api.parseTapmode();
    }
    //显示热搜
    function showHot() {
        api.ajax({
            url: BASE_URL + 'App/Select/search',
            method: 'get'
        }, function(ret, err) {
            if (ret && ret.code == 1) {
                var tpl = $$('#hot_tpl').html();
                var tempFn = doT.template(tpl);
                $$('#data_html').append(tempFn(ret.data));
                api.parseTapmode();
            }
        });

    }

    //删除历史记录 弹窗
    function delConfirm() {
        var confirmMaskTxt = ['确认清空历史记录？', '取消', '确认删除'];        
        openConfirmMask(confirmMaskTxt, 'delHistory()');
    }
    //确认删除历史记录
    function delHistory() {
        $$('.historyBox').remove();
        historyData = [];
        $api.setStorage('searchHistory', historyData);
    }
	//切换排序
	function changeSort(ind){
		filterType = ind;
		if(ind==3){
			if( $$('.sortList .sort_price').hasClass('on') ){
				$$('.sortList .sort_price').removeClass('on');
			}else if($$('.sortList .sort_price').hasClass('active')){
				$$('.sortList .sort_price').addClass('on');
				filterType = 4;
			}
		}else{
			$$('.sortList .sort_price').removeClass('on');
		}
		$$('.sortList > div').removeClass('active').eq(ind).addClass('active');

		setPostData();
	}
	function setPostData(){
		currentPage = 1;
		postData = {
			pageSize: pageSize
		}
		if(filterType == 1){
			//优惠券
			postData.coupon = true;
		}
		if(filterType == 2){
			//佣金
			postData.data_amount = -1;
		}
		if(filterType == 3){
			//价格升序
			postData.zk_final_price = 1;
		}
		if(filterType == 4){
			//价格降序
			postData.zk_final_price = -1;
		}
        if(getUserId()){
            postData.userid = getUserId();
        }
		getData();
	}
    //搜索事件
	function searchFn(s){
		loadFlag = true;
		currentSearch = s;
		currentPage = 1;
		postData = {
			pageSize: pageSize
		}
		getData();

		//存搜索历史
        historyData.unshift(currentSearch);
        var arr = unique(historyData);
        $api.setStorage('searchHistory', arr);
	}
    //点击标签
    function searchTag(el) {
        var _this = $$(el);
        currentSearch = _this.text();
        api.execScript({
            script: 'setVal("' + currentSearch + '");'
        });
		searchFn(currentSearch);
    }
    function getData() {
		isLoading = true;
		postData.search = currentSearch;
		postData.pageNo = currentPage;
		api.ajax({
			url: BASE_URL + 'App/Select/shopList',
			method: 'post',
			data: {
				values: postData
			}
		}, function(ret, err) {
			if (ret) {
				if (ret.code == 1 && ret.data.length > 0) {
					$$('body').addClass('bg-f5');
					// api.execScript({
					// 	script: 'showSort(1);'
					// });
					$$('#data_html').addClass('aui-hide');
					$$('.resultBox').removeClass('aui-hide');
					$$('.noData,.noMoreData').addClass('aui-hide');
					getFlow(ret.data);
					currentPage++;
					api.parseTapmode();
					//如果加载出来的数量 小于 pagesize 说明到底线了
					if (ret.data.length < postData.pageSize) {
						$$('.noMoreData').removeClass('aui-hide');
						loadFlag = false;
					}
				} else {
					if (currentPage == 1) {
						showNoData();
					} else {
						$$('.noMoreData').removeClass('aui-hide');
					}
					loadFlag = false;
				}

			} else {
				showNoData();
			}
			isLoading = false;
		});
    }
	//没有检索到商品
	function showNoData(){
		$$('#data_html').removeClass('aui-hide');
		$$('.resultBox').addClass('aui-hide');
		$$('.noMoreData').addClass('aui-hide');
		$$('body').removeClass('bg-f5');
		// api.execScript({
		// 	script: 'showSort(-1);'
		// });
		var tpl = $$('#nodata_tpl').html();
		var tempFn = doT.template(tpl);
		$$('#data_html').html(tempFn( ));
		api.parseTapmode();
	}
    //瀑布流
    function getFlow(flowData) {
        var tpl = $$('#flow_tpl').html();
        var tempFn = doT.template(tpl);
        var elem = $$(tempFn(flowData));
        if (currentPage == 1) {
            $$('#flow_html').html('<div class="grid-sizer"></div>');
        }
        $$(gridDom).append(elem);
        grid.appended(elem);
        imagesLoaded(gridDom, function() {
            grid.layout();
        });

        api.parseTapmode();
    }


</script>

</html>
